<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page import="com.main.utils.CommonUtils" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<script src="/resources/js/jquery.1.9.1.min.js"></script>
<script src="/resources/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/resources/js/scrollpagination.js"></script>
<title>${selectUploader.name}</title>
<script>
		$(function() {
			loadedSize = 1;
			uploaderId = parseInt(document.URL.substring(document.URL.lastIndexOf('/')+1));;
			$('#trollsContent').scrollPagination({
				'contentPage' : "/loadTrollByUploader",
				'scrollTarget' : $(window),
				'heightOffset' : 400,
				'beforeLoad' : function() {
					$('#loader').fadeIn();
					if (loadedSize != $('#trollsContent').children().size()) {
						loadedSize = $('#trollsContent').children().size();
						$(this)[0].contentData = {
							loadedSize : loadedSize,
							uploaderId: uploaderId
						};
					} else {
						$(this)[0].contentData = {
							loadedSize : -1,
							uploaderId: uploaderId
						};
					}

				},
				'afterLoad' : function(elementsLoaded) {
					$('#loader').fadeOut();
				}
			});

		});
	</script>
</head>
<body>
	<tiles:insertDefinition name="tabletDefaultTemplate3">
		<tiles:putAttribute name="body">
			<div id="mainContainer">
				<div class="mainBox">
				<div id="uploader-id" class="dummy">${selectUploader.id}</div>
					<div class="subHeading">
						<h3>Các ảnh ${selectUploader.name} đã đăng</h3>
					</div>
					<div id="trollsContent" class="newsList">
						<c:forEach items="${trollList}" var="trollItem">
							<div class="newsListItem">
								<div class="listItemSeparator"></div>
								<div class="trollThumbnail">
									<a href="photo/${trollItem.id}" target="_blank"> <img
										src="/resources/data/photos/${trollItem.url}" alt="${trollItem.title}"
										class="thumbImg">
									</a>
								</div>
								<div class="info" style="position: relative;">
									<h2>
										<a target="_blank" href="photo/${trollItem.id}">${trollItem.title}</a>
									</h2>
									<div class="uploader">
										Đăng bởi <a href="/uploader/${trollItem.uploader.id}">${trollItem.uploader.name}</a>
									</div>
									<div class="stats">
										<div class="viewComments">
											<span class="views" title="lượt xem"><fmt:formatNumber pattern="#,###,##0" value="${trollItem.viewNumber}"/></span>
											<span class="comments" title="lượt bình luận"><fmt:formatNumber pattern="#,###,##0" value="${ trollItem.commentNumber}"/></span>
										</div>
									</div>
								</div>
							</div>
						</c:forEach>
					</div>
					<div id="loader" class="loader">
						<span></span> <span></span> <span></span> Loading...
					</div>
				</div>
			</div>
		</tiles:putAttribute>
		<tiles:putAttribute name="right">
			<div class="uploader-info">
				<div class="uploader-avatar">
					<img
						src="${selectUploader.avatar }"
						alt="${selectUploader.name }">
					<div class="name">
						<h2>${selectUploader.name }</h2>
						<span>Tham gia từ: <fmt:formatDate pattern="dd-MM-yyyy" value="${selectUploader.createDate}" /></span>
					</div>
				</div>
				<div class="stats">
					<div>
						Số ảnh đã đăng: <span class="number"><fmt:formatNumber pattern="#,###,##0" value="${selectUploader.postNumber }"/></span>
					</div>
					<div>
						Được like: <span class="number"><fmt:formatNumber pattern="#,###,##0" value="${selectUploader.likeNumber }"/></span> lần
					</div>
					<div>
						Được bình luận: <span class="number"><fmt:formatNumber pattern="#,###,##0" value="${selectUploader.commentNumber }"/></span> lần
					</div>
					<div>
						Được xem: <span class="number"><fmt:formatNumber pattern="#,###,##0" value="${selectUploader.viewNumber }"/></span> lần
					</div>

				</div>
			</div>
		</tiles:putAttribute>
	</tiles:insertDefinition>
</body>
</html>